<template>
  <el-dialog
    title="批量上传用户"
    :visible.sync="dialogProp.visible"
    @closed="handleClose"
    width="500px"
  >
    <el-form :model="ruleForm" ref="ruleForm" label-width="120px">
      <el-form-item label="选择文件">
        <el-upload
          action="#"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="changeUpload"
        >
          <div class="upload-box">
            <el-input
              v-model="ruleForm.fileName"
              placeholder="请选择上传文件..."
              size="mini"
              disabled
            ></el-input>
            <el-button type="success" class="upload-button">选择文件</el-button>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="上传说明">
        <div>1、支持xlsx.和xsl.格式文件；</div>
        <div>2、支持上传用户dp号；</div>
        <div>3、单个文件最多20000条，总上传量300000条；</div>
        <div>
          4、点击下载：<el-button type="text" @click="handleDownload"
            >dp号模板；</el-button
          >
        </div>
      </el-form-item>
    </el-form>

    <!-- upload result -->
    <el-dialog
      title="上传结果"
      :visible.sync="innerDialog.visible"
      @closed="handleInDialog"
      width="500px"
      append-to-body
    >
      <div class="inner-dialog-wrap">
        <div class="content">
          {{ innerDialog.result ? '上传成功' : '上传失败' }}
        </div>
        <div v-if="innerDialog.result" class="nums">
          上传成功{{ innerDialog.nums }}条
        </div>
        <el-button type="success" @click="handleDownErrorDoc">
          {{ innerDialog.result ? '确定' : '下载结果' }}
        </el-button>
      </div>
    </el-dialog>

    <span slot="footer" class="dialog-footer">
      <el-button type="success" :loading="loading" @click="handleSubmit"
        >上传</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { downUrl, downDpAccountErrorDoc } from '@/api/userGroup'

export default {
  props: ['dialogProp'],

  data() {
    return {
      downUrl: '',
      loading: false,

      innerDialog: {
        nums: 0,
        visible: false,
        result: true,
        serial: ''
      },

      ruleForm: {
        upFile: null,
        fileName: ''
      }
    }
  },

  created() {
    this.downUrl = downUrl()
  },

  methods: {
    // upload
    handleSubmit() {
      if (!this.ruleForm.fileName) {
        this.$message({
          message: '请添加文件！',
          type: 'warning'
        })

        return
      }

      this.loading = true
      const formData = new FormData()
      const url = '/user-group/users/binding?userGroup=true&serial='
      formData.append('file', this.ruleForm.upFile)

      this.pubRequire(
        'post',
        url + this.innerDialog.serial,
        formData,
        (response) => {
          this.loading = false
          this.innerDialog.visible = true
          this.innerDialog.result = true
          this.innerDialog.serial = response.serial
          this.innerDialog.nums = response.successnum
          this.$emit('updateUsers', response)
        },
        (err, status, header) => {
          const { successnum, serial } = header

          this.loading = false
          this.innerDialog.visible = true
          this.innerDialog.result = false

          if (serial) {
            this.innerDialog.serial = serial
          }

          this.innerDialog.nums = successnum || 0
          this.$emit('updateUsers', header)

          this.$message({
            message: err.message,
            type: 'warning'
          })
        }
      )
    },

    // download
    handleDownload() {
      let url = this.downUrl + '?userGroup=true'
      this.downFile('get', url, '', '上传用户信息表')
    },

    // close
    handleClose() {
      this.loading = false
      this.ruleForm.fileName = ''
      this.ruleForm.upFile = null
      this.$refs['ruleForm'].resetFields()
    },

    // close inner dialog
    handleInDialog() {
      this.innerDialog.visible = false
      this.dialogProp.visible = false
    },

    // download error docs
    handleDownErrorDoc() {
      if (!this.innerDialog.result) {
        // download result
        downDpAccountErrorDoc()
      }

      this.innerDialog.visible = false
      this.dialogProp.visible = false
    },

    // after Upload
    changeUpload: function(file, fileList) {
      let fileExt = file.name.replace(/.+\./, '')
      if (fileExt !== 'xlsx' && fileExt !== 'xls') {
        this.$message({
          type: 'warning',
          message: '文档格式错误，请使用模板文档；'
        })

        return
      }

      this.ruleForm.fileName = file.name
      this.ruleForm.upFile = file.raw
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-button--text) {
  color: #1dc8a4 !important;
}

.upload-box {
  display: flex;
  align-items: center;

  & .upload-button {
    margin-left: 30px;
  }
}

.inner-dialog-wrap {
  width: 100%;
  height: 270px;
  display: flex;
  align-items: center;
  flex-direction: column;

  & .content {
    width: 100%;
    margin-top: 45px;
    font-size: 18px;
    color: rgb(202, 79, 79);
    text-align: center;
  }

  & .nums {
    margin-top: 15px;
    font-size: 12px;
    text-align: center;
  }

  & .el-button {
    margin-top: 60px;
  }

  & .el-button--success {
    padding: 8px 28px;
    background-color: #1dc8a4;
    border-color: #1dc8a4;
  }
}
</style>
